<template>
	<view class="editShop">
		<u-navbar title="中新汇算管理端" :border-bottom="false"></u-navbar>
		<view class="i" @click="CliShow1">
			<view class="l">
				商品分类
				<view class="c">*</view>
			</view>
			<view class="r">
				<view class="t">{{ form.hxs.label }}</view>
				<u-icon name="arrow-right"></u-icon>
			</view>
		</view>
		<view class="i" @click="CliShow2">
			<view class="l">
				商品类型
				<view class="c">*</view>
			</view>
			<view class="r">
				<view class="t">{{ form.splx.label }}</view>
				<u-icon name="arrow-right"></u-icon>
			</view>
		</view>
		<view class="i" @click="CliShow3">
			<view class="l">
				支持站点
				<view class="c">*</view>
			</view>
			<view class="r">
				<view class="t">
					{{ form.nameList }}
				</view>
				<u-icon name="arrow-right"></u-icon>
			</view>
		</view>
		<view class="i">
			<view class="l">基本信息</view>
			<view></view>
		</view>
		<view class="i">
			<view class="l l2">
				商品标题
				<view class="c">*</view>
			</view>
			<view class="r"><input type="text" :disabled="disabledBu" v-model="form.title" placeholder="请输入商品标题（必填）" /></view>
		</view>
		<view class="i">
			<view class="l l2">
				商品主图
				<view class="c">*</view>
			</view>
			<view class="r2" @click="mainImg">
				<view class="r2_boxIO" v-if="form.img">
					<img :src="form.img" alt="" style="width: 100%; height: 100%" />
					<view class="btn" v-if="!disabledBu" @click.stop="deleteZImg"><u-icon name="close" color="#a9a9a9" size="24"></u-icon></view>
				</view>
				<view class="r2_box r2_box2" v-else style="flex-wrap: wrap">
					<img src="../../static/shangchuan.png" alt="" class="r2_box_img" />
					<view style="text-align: center; width: 100%; font-size: 20rpx">大小:400*400</view>
				</view>
			</view>
		</view>
		<view class="i2">
			<view class="top">
				<view class="l">
					商品轮播图
					<view class="c">*</view>
				</view>
			</view>
			<view class="bot">
				<view class="img_box2" v-for="(item, index) in form.arrImg_list" :key="index">
					<img :src="item" alt="" />
					<view class="btn" v-if="!disabledBu" @click="deleteImg(index)"><u-icon name="close" color="#a9a9a9" size="24"></u-icon></view>
				</view>
				<view class="img_box" style="flex-wrap: wrap" v-if="form.arrImg_list.length !== 5" @click="mainImg2">
					<img src="../../static/shangchuan.png" alt="" style="width: 25px; height: 25px" />
					<view style="text-align: center; width: 100%; font-size: 20rpx">大小:375*286</view>
				</view>
			</view>
		</view>
		<view class="i">
			<view class="l l2">
				商品简介
				<view class="c">*</view>
			</view>
			<view class="r"><input type="text" :disabled="disabledBu" v-model="form.introduction" placeholder="请输入商品简介" /></view>
		</view>
		<view class="i2">
			<view class="top">
				<view class="l">
					商品详情
					<view class="c">*</view>
				</view>
				<view class="l_r">建议规范填写</view>
			</view>
			<view class="txtr">
				<view style="height: 120px; overflow-y: auto; display: flex; flex-wrap: wrap">
					<view class="editor_img" @click="clieditor(index)" v-for="(item, index) in editorImg" :key="index">
						<img style="width: 100%; height: 50%" :src="item.checkbox ? item.icon_active : item.icon" mode="aspectFit" alt="" />
					</view>
				</view>
				<editor
					class="myEdit"
					placeholder="例：·可用时间：2024.08.09-2024.09.31（节日不可使用）\n·油焖大虾4斤+重庆秘制干煸炒鸡*2+开胃凉拌毛豆一份+金桔柠檬汁*2，虾子根据季节性20-25只。\n·温馨提示：因季节原因，龙虾现已做开背处理，可能会导致肉质松散，敬请谅解。"
					@ready="onEditReady"
					@blur="blur"
					:value="form.introduction"
					:show-img-size="true"
					:show-img-toolbar="true"
					:show-img-resize="true"
				></editor>
				<!-- <textarea
					v-model="form.introduction"
					:disabled="disabledBu"
					maxlength="300"
					placeholder="例：·可用时间：2024.08.09-2024.09.31（节日不可使用）·油焖大虾4斤+重庆秘制干煸炒鸡*2+开胃凉拌毛豆一份+金桔柠檬汁*2，虾子根据季节性20-25只。·温馨提示：因季节原因，龙虾现已做开背处理，可能会导致肉质松散，敬请谅解。"
				></textarea> -->
			</view>
		</view>

		<view class="i">
			<view class="l">
				供货价
				<view class="c">*</view>
			</view>
			<view class="r">
				<input type="text" :disabled="disabledBu" v-model="form.xj_sprice" placeholder="请输入供货价格" />
				<view class="d">元</view>
			</view>
		</view>

		<view class="i">
			<view class="l">
				库存
				<view class="c">*</view>
			</view>
			<view class="r">
				<input type="text" :disabled="disabledBu" v-model="form.stock" placeholder="请输入商品库存" />
				<view class="d">张</view>
			</view>
		</view>
		<view class="i">
			<view class="l">
				核销数
				<view class="c">*</view>
			</view>
			<view class="r">
				<input type="text" :disabled="form.hxs.value === '1' && disabledBu" v-model="form.max_num" placeholder="请输入核销数" />
				<view class="d">张</view>
			</view>
		</view>
		<view class="bt" @click="confirmSubmit" v-if="!disabledBu">提交审核</view>
		<u-select v-model="show1" :list="list1" @confirm="confirm1"></u-select>
		<u-select v-model="show2" :list="list2" @confirm="confirm2"></u-select>
		<u-popup v-model="show3" mode="bottom" :safe-area-inset-bottom="true">
			<view class="kl">
				<view class="kl_title">请选择服务站</view>
				<view class="kl_header">
					<view style="width: 25%" @click="CliShow4">{{ addressText.label }}</view>
					<view style="width: 75%"><u-search v-model="keyword" @search="search" @custom="search"></u-search></view>
				</view>
				<scroll-view scroll-y="true" class="kl_header" style="height: 15vh">
					<view style="display: flex; padding: 20px 0 10px 0; flex-wrap: wrap; height: 10vh">
						已选择服务站:
						<view v-for="(item, index) in CheckTheBox" :key="index" style="display: flex">
							{{ item.name }}
							<view v-if="index !== CheckTheBox.length - 1">,</view>
						</view>
					</view>
				</scroll-view>
				<!-- <view class="kl_header" style="padding: 20px 0 10px 0; flex-wrap: wrap;height: 21;">
					
				</view> -->
				<scroll-view scroll-y="true" class="ck">
					<u-checkbox v-model="checked" @change="checkboxChangeMAX" :disabled="disabledX" label-size="30">全选</u-checkbox>
					<u-checkbox-group @change="checkboxGroupChange" :wrap="true">
						<u-checkbox
							@change="checkboxChange(item)"
							label-size="30"
							:disabled="item.disabled"
							v-model="item.checked"
							v-for="(item, index) in list3"
							:key="index"
							:name="item.name"
						>
							{{ item.name }}
						</u-checkbox>
					</u-checkbox-group>
				</scroll-view>
				<view class="bt" @click="confirm3">确认</view>
				<u-select v-model="show4" mode="mutil-column-auto" :list="addressList" @confirm="confirm4"></u-select>
			</view>
		</u-popup>
		<u-modal v-model="showu" :content="content" :title-style="{ fontSize: 40 + 'rpx' }">
			<view class="slot-content" style="padding: 30rpx">
				<rich-text :nodes="content"></rich-text>
			</view>
		</u-modal>
		<ksp-cropper mode="free" :width="300" :height="300" :maxWidth="1024" :maxHeight="1024" :url="url" @cancel="oncancel" @ok="onok"></ksp-cropper>
	</view>
</template>

<script>
import { getgoodsgenreall, getFwz, qiniutoken, saveshopgoods } from '../../libs/axios.js';
import { address } from '../../libs/aaaaa.js';
import { imgUploads } from '../../libs/upload.js';
import _ from 'lodash';
export default {
	data() {
		return {
			content: `●已通过审核的商品除库存之外不能修改相关描述<br>
●已审核通过的商品可增加支持的服务站<br>
●已添加的服务站不可取消绑定，请注意<br>
●已审核通过的商品如需修改及下架商品请联系平台管理员`,
			show1: false,
			show2: false,
			show3: false,
			show4: false,
			checked: false,
			keyword: '',
			url: '',
			form: {
				img: '',
				arrImg_list: [],
				nameList: '',
				hxs: {},
				splx: {},
				max_num: 1,
				introduction: '',
				details: ''
			},
			list1: [],
			list2: [
				{
					value: '1',
					label: '实体商品'
				},
				{
					value: '2',
					label: '虚拟卡劵商品'
				}
			],
			list3: [],
			fileList: [],
			editorImg: [
				{
					checkbox: false,
					icon: '../../static/editor1.png',
					icon_active: '../../static/editor1_active.png'
				},
				{
					checkbox: false,
					icon: '../../static/editor2.png',
					icon_active: '../../static/editor2_active.png'
				},
				{
					checkbox: false,
					icon: '../../static/editor3.png',
					icon_active: '../../static/editor3.png'
				},
				{
					checkbox: false,
					icon: '../../static/editor4.png',
					icon_active: '../../static/editor4.png'
				},
				{
					checkbox: false,
					icon: '../../static/editor5.png',
					icon_active: '../../static/editor5.png'
				},
				{
					checkbox: false,
					icon: '../../static/editor6.png',
					icon_active: '../../static/editor6.png'
				},
				{
					checkbox: false,
					icon: '../../static/editor7.png',
					icon_active: '../../static/editor7.png'
				},
				{
					checkbox: false,
					icon: '../../static/editor8.png',
					icon_active: '../../static/editor8.png'
				},
				{
					checkbox: false,
					icon: '../../static/editor9.png',
					icon_active: '../../static/editor9_active.png'
				},
				{
					checkbox: false,
					icon: '../../static/editor10.png',
					icon_active: '../../static/editor10_active.png'
				},
				{
					checkbox: false,
					icon: '../../static/editor11.png',
					icon_active: '../../static/editor11.png'
				},
				{
					checkbox: false,
					icon: '../../static/editor12.png',
					icon_active: '../../static/editor12.png'
				}
			],
			addressList: [
				{
					value: 0,
					label: '全部',
					children: [{ value: 0, label: '全部' }]
				}
			],
			addressText: {
				label: '地区'
			},
			CheckTheBox: [],
			state: {},
			token: '',
			fileList: [],
			disabledBu: false,
			editorContent: null,
			showu: false,
			disabledX: false,
			typeImg: null
		};
	},
	onLoad(option) {
		this.showu = true;
		this.getInfo(option);
		this.getgetgoodsgenreall();
		this.getAddress();
		this.state = this.$store.state;
	},
	methods: {
		clieditor(index) {
			const _this = this;
			let a = _this.editorImg[index].checkbox;
			_this.editorImg[index].checkbox = !a;
			switch (index + 1) {
				case 1:
					this.editorContent.format('bold');
					break;
				case 2:
					this.editorContent.format('italic');
					break;
				case 3:
					this.editorContent.format('align', 'left');
					break;
				case 4:
					this.editorContent.format('align', 'center');
					break;
				case 5:
					this.editorContent.format('align', 'right');
					break;
				case 6:
					this.editorContent.undo();
					break;
				case 7:
					this.editorContent.format('list', 'bullet');
					break;
				case 8:
					this.editorContent.format('list', 'ordered');
					break;
				case 9:
					this.editorContent.format('fontSize', '24px');
					break;
				case 10:
					this.editorContent.format('underline');
					break;
				case 11:
					uni.chooseImage({
						count: 1,
						success: async (res) => {
							uni.showLoading({
								title: '上传中，请稍候...'
							});
							let key = '/images/details/' + Date.parse(new Date()) + '.png';
							let info = await _this.getUploadFile(res.tempFilePaths[0], key);
							let path = JSON.parse(info.data).key;
							_this.editorContent.insertImage({
								src: _this.state.imgUrl + path,
								alt: '图像',
								success: function () {
									for (let i = 0; i < 50; i++) {
										_this.editorContent.format('bold');
									}
									_this.editorImg.forEach((item) => {
										item.checkbox = false;
									});
									uni.hideLoading();
								}
							});
						}
					});
					break;
				case 12:
					uni.showModal({
						title: '清空编辑器',
						content: '确定清空编辑器全部内容？',
						success: (res) => {
							if (res.confirm) {
								_this.editorContent.clear({
									success: function (res) {
										console.log('clear success');
									}
								});
							}
						}
					});
					break;
			}
		},
		deleteZImg() {
			this.form.img = '';
		},
		deleteImg(index) {
			this.form.arrImg_list.splice(index, 1);
		},
		blur(e) {
			this.form.details = e.detail.html;
		},
		onEditReady() {
			const _this = this;
			uni.createSelectorQuery()
				.in(this)
				.select('.myEdit')
				.fields(
					{
						size: true, //是否返回节点尺寸（width height）
						context: true //是否返回节点尺寸（width height）
					},
					(res) => {
						this.editorContent = res.context;
						for (let i = 0; i < 50; i++) {
							this.editorContent.format('bold');
						}
						console.log('富文本更新完成');
						if (_this.form.id) {
							this.editorContent.setContents({ html: _this.form.details });
							this.editorContent.blur();
						}
						uni.hideKeyboard();
					}
				)
				.exec();
		},
		onStatusChange() {},
		async getInfo(option) {
			let info1 = await getFwz();
			info1.data.forEach((item) => {
				this.list3.push({
					name: item.title,
					id: item.id,
					checked: false,
					disabled: false
				});
			});
			let infob = this.$store.state.itemShopInfo;
			if (infob) {
				console.log(infob);
				let info = JSON.parse(infob);
				console.log(info);
				this.form.id = info.id;
				this.form.hxs.label = info.type === 1 ? '实体商品' : '虚拟卡劵商品';
				this.form.hxs.value = info.type;
				this.form.splx.label = info.genre_title;
				this.form.splx.value = info.genre_id;
				this.form.nameList = info.fwz_titles;
				let c = _.compact(info.fwz_ids.split(','));
				let numX = 0;
				this.list3.forEach((item) => {
					c.forEach((ktem) => {
						if (item.id === Number(ktem)) {
							item.checked = true;
						}
					});
					if (item.checked) {
						if (info.status === 1) {
							numX += 1;
							item.disabled = true;
						}
						this.CheckTheBox.push(item);
					}
				});
				if (this.list3.length === numX) {
					this.disabledX = true;
				} else {
					this.disabledX = false;
				}

				this.form.fwz_ids = c.join(',');
				this.form.title = info.title;
				this.form.img = info.map_image;
				this.form.arrImg_list = JSON.parse(info.arr_image);
				this.form.xj_sprice = info.xj_sprice;
				this.form.stock = info.sy_stock;
				this.form.introduction = info.introduction;
				this.form.details = info.details;

				this.form.max_num = info.max_num;
				if (option.status === 'true') {
					this.disabledBu = true;
				} else {
					this.disabledBu = false;
				}
				this.duplicateRemoval();
			}
		},
		CliShow1() {
			if (this.disabledBu) {
				return false;
			}
			this.show2 = true;
		},
		CliShow2() {
			if (this.disabledBu) {
				return false;
			}
			this.show1 = true;
		},
		CliShow3() {
			if (this.disabledBu) {
				return false;
			}
			this.show3 = true;
		},
		async getUploadFile(file, key) {
			await this.getqiniutoken();
			const _this = this;
			return new Promise((je, jc) => {
				uni.uploadFile({
					url: 'https://upload-z2.qiniup.com',
					filePath: file,
					name: 'file',
					formData: {
						key: key, // 存到七牛云后的文件名字，访问图片会用到
						token: _this.token // uploadToken，需要动态获取，调用云函数接口获取
					},
					success(res) {
						console.log(res);
						je(res);
					},
					fail() {
						console.log('上传失败了', err);
					}
				});
			});
		},

		mainImg() {
			if (this.disabledBu) {
				return false;
			}
			const _this = this;
			uni.chooseImage({
				count: 1, // 可上传的图片数量，为1表示单张上传
				success: async function (res, row) {
					_this.typeImg = 1;
					_this.url = res.tempFilePaths[0];
				}
			});
		},
		mainImg2() {
			if (this.disabledBu) {
				return false;
			}
			const _this = this;
			uni.chooseImage({
				count: 1, // 可上传的图片数量，为1表示单张上传
				success: async function (res, row) {
					_this.typeImg = 2;
					_this.url = res.tempFilePaths[0];
				}
			});
		},
		async onok(ev) {
			const _this = this;
			uni.showLoading({
				title: '上传中，请稍候...'
			});

			if (_this.typeImg === 1) {
				let key = '/images/zt/' + Date.parse(new Date()) + '.png';
				let info = await _this.getUploadFile(ev.path, key);
				let path = JSON.parse(info.data).key;
				_this.form.img = _this.state.imgUrl + path;
				uni.hideLoading();
				_this.url = '';
			} else if (_this.typeImg === 2) {
				let key = '/images/zt/' + Date.parse(new Date()) + (Math.floor(Math.random() * 100) + 1) + '.png';
				let info = await _this.getUploadFile(ev.path, key);
				let path = JSON.parse(info.data).key;
				_this.form.arrImg_list.push(_this.state.imgUrl + path);
				uni.hideLoading();
				_this.url = '';
			}
		},
		oncancel() {
			// url设置为空，隐藏控件
			this.url = '';
		},

		async getFileList(file) {
			const _this = this;
			let key = '/images/zt/' + Date.parse(new Date()) + (Math.floor(Math.random() * 100) + 1) + '.png';
			let info = await _this.getUploadFile(file[0], key);
			let path = JSON.parse(info.data).key;
			_this.form.arrImg_list.push(_this.state.imgUrl + path);

			_this.fileList.shift();
			if (this.fileList.length > 0) {
				setTimeout(() => {
					_this.getFileList(_this.fileList);
				}, 200);
			} else {
				uni.hideLoading();
			}
		},
		confirmSubmit: _.debounce(
			async function () {
				this.editorContent.getContents({
					success: (res) => {
						this.form.details = res.html;
					}
				});
				if (!this.form.splx.value) {
					uni.showToast({
						title: '请选择商品分类',
						icon: 'error',
						duration: 2000
					});
					return false;
				}
				if (!this.form.hxs.value) {
					uni.showToast({
						title: '请选择商品类别',
						icon: 'error',
						duration: 2000
					});
					return false;
				}
				if (!this.form.fwz_ids) {
					uni.showToast({
						title: '请选择支持站点',
						icon: 'error',
						duration: 2000
					});
					return false;
				}

				if (!this.form.title) {
					uni.showToast({
						title: '请选择商品标题',
						icon: 'error',
						duration: 2000
					});
					return false;
				}
				if (!this.form.img) {
					uni.showToast({
						title: '请上传商品主图',
						icon: 'error',
						duration: 2000
					});
					return false;
				}
				if (!this.form.arrImg_list) {
					uni.showToast({
						title: '请上传商品轮播图',
						icon: 'error',
						duration: 2000
					});
					return false;
				}
				if (!this.form.introduction) {
					uni.showToast({
						title: '请输入商品简介',
						icon: 'error',
						duration: 2000
					});
					return false;
				}

				if (!this.form.xj_sprice) {
					uni.showToast({
						title: '请输入供货价',
						icon: 'error',
						duration: 2000
					});
					return false;
				}
				if (!this.form.stock) {
					uni.showToast({
						title: '请输入库存',
						icon: 'error',
						duration: 2000
					});
					return false;
				}

				let info = await saveshopgoods({
					id: this.form.id,
					genre_id: this.form.splx.value,
					title: this.form.title,
					map_image: this.form.img,
					arr_image: this.form.arrImg_list,
					introduction: this.form.introduction,
					details: this.form.details,
					xj_sprice: this.form.xj_sprice,
					max_num: this.form.max_num,
					fwz_ids: this.form.fwz_ids,
					stock: this.form.stock,
					type: this.form.hxs.value
				});
				uni.showToast({
					title: info.message,
					icon: 'success',
					duration: 2000
				});
				setTimeout(() => {
					let page = getCurrentPages();
					let sPage = page[page.length - 2];
					uni.navigateBack({
						delta: 1,
						success() {
							sPage.$vm.search();
						}
					});
				}, 2000);
			},
			1000,
			{
				leading: true, //在延迟开始前立即调用事件
				trailing: false //在延时结束后不调用,保证事件只被触发一次
			}
		),

		CliShow4() {
			this.show4 = true;
		},
		async getgetgoodsgenreall() {
			let info1 = await getgoodsgenreall();
			info1.data.forEach((item) => {
				this.list1.push({
					value: item.id,
					label: item.title
				});
			});
		},
		async getqiniutoken() {
			let info = await qiniutoken({
				scope: this.$store.state.scope_img
			});
			this.token = info.data;
		},
		async getgetfwzall(key, code1, code2) {
			let info1 = await getFwz({
				title: key,
				province_code: code1,
				city_code: code2
			});
			info1.data.forEach((item) => {
				this.list3.push({
					name: item.title,
					id: item.id,
					checked: false,
					disabled: false
				});
			});
			this.duplicateRemoval();
		},
		search() {
			this.checked = false;
			this.list3 = [];
			this.getgetfwzall(this.keyword);
		},
		confirm3() {
			let arr = [];
			let arr2 = [];
			console.log(this.CheckTheBox);
			this.CheckTheBox.forEach((item) => {
				arr.push(item.id);
				arr2.push(item.name);
			});
			this.form.fwz_ids = arr.join(',');
			this.form.nameList = arr2.join(',');
			console.log(this.form);
			this.show3 = false;
		},
		getAddress() {
			let arr = address();
			arr.forEach((item) => {
				let i = {
					value: item.code,
					label: item.label,
					children: [
						{
							value: 0,
							label: '全部'
						}
					]
				};
				item.list.forEach((ktem) => {
					i.children.push({
						value: ktem.code,
						label: ktem.label
					});
				});
				this.addressList.push(i);
			});
		},
		confirm1(e) {
			this.form.splx = e[0];
			console.log(e);
		},
		confirm2(e) {
			this.form.hxs = e[0];
		},
		confirm4(e) {
			if (e[1].value === 0) {
				this.addressText = e[0];
				this.getgetfwzall(this.keyword, e[0].value);
			} else {
				this.addressText = e[1];
				this.getgetfwzall(this.keyword, e[0].value, e[1].value);
			}
			this.list3 = [];
		},
		checkedAll() {
			this.list3.map((val) => {
				val.checked = true;
			});
		},
		duplicateRemoval() {
			let list = [];
			this.CheckTheBox.forEach((item) => {
				if (item.checked) {
					list.push(item);
				}
			});
			this.CheckTheBox = list;
			let num = 0;
			this.list3.forEach((item) => {
				this.CheckTheBox.forEach((ktem) => {
					if (item.id === ktem.id) {
						item.checked = true;
					}
				});
				if (item.checked) {
					num++;
				}
			});
			if (num === this.list3.length) {
				this.checked = true;
			}
		},
		checkboxChange(e) {
			console.log(e);
			this.CheckTheBox.push(e);
			setTimeout(() => {
				this.duplicateRemoval();
			}, 100);
		},
		checkboxChangeMAX(e) {
			if (e.value) {
				this.list3.map((val) => {
					val.checked = true;
				});
				this.CheckTheBox = this.list3;
			} else {
				this.list3.map((val) => {
					val.checked = false;
				});
				this.CheckTheBox = [];
			}
		},
		checkboxGroupChange(e) {
			e.length === this.list3.length ? (this.checked = true) : (this.checked = false);
		}
	}
};
</script>

<style lang="scss">
.editShop {
	padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/
	padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/
	.i {
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.l {
			font-size: 30rpx;
			font-weight: 400;
			color: rgba(51, 51, 51, 1);
			display: flex;
			align-items: flex-end;
			.c {
				font-size: 30rpx;
				font-weight: 400;
				color: rgba(255, 0, 0, 1);
				margin-left: 10rpx;
			}
		}
		.l2 {
			font-size: 26rpx;
			font-weight: 400;
			color: rgba(51, 51, 51, 1);
		}
		.r {
			width: 70%;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			font-size: 30rpx;
			font-weight: 400;
			color: #222;
			.t {
				margin-right: 10rpx;
			}
			input {
				text-align: right;
			}
			.d {
				margin-left: 10rpx;
			}
		}
		.r2 {
			.r2_box {
				width: 73px;
				height: 73px;
				display: flex;
				align-items: center;
				justify-content: center;
				.r2_box_img {
					width: 25px;
					height: 25px;
				}
			}
			.r2_boxIO {
				width: 73px;
				height: 73px;
				display: flex;
				align-items: center;
				justify-content: center;
				position: relative;
				.btn {
					position: absolute;
					top: -12rpx;
					right: -12rpx;
					background: #eee;
					border-radius: 50%;
					width: 40rpx;
					height: 40rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
			.r2_box2 {
				background: rgba(242, 242, 242, 1);
			}
			.r2_t {
				font-size: 26rpx;
				font-weight: 400;
				color: rgba(204, 204, 204, 1);
			}
			.r2_b {
				width: 146rpx;
				height: 146rpx;
				margin: 10rpx auto;
				img {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
	.i2 {
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		.top {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 10rpx 0;
			font-size: 30rpx;
			font-weight: 400;
			color: rgba(51, 51, 51, 1);
			.l {
				display: flex;
				align-items: center;
			}
			.c {
				font-size: 30rpx;
				font-weight: 400;
				color: rgba(255, 0, 0, 1);
				margin-left: 10rpx;
			}
			.l_r {
				font-size: 26rpx;
				font-weight: 400;
				color: rgba(204, 204, 204, 1);
			}
		}
		.bot {
			margin-top: 10rpx;
			display: flex;
			flex-wrap: wrap;
			.img_box2 {
				width: 146rpx;
				height: 146rpx;
				margin-right: 20rpx;
				margin-bottom: 20rpx;
				position: relative;
				img {
					width: 100%;
					height: 100%;
				}
				.btn {
					position: absolute;
					top: -12rpx;
					right: -12rpx;
					background: #eee;
					border-radius: 50%;
					width: 40rpx;
					height: 40rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
			.img_box {
				width: 146rpx;
				height: 146rpx;
				margin-right: 20rpx;
				margin-bottom: 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background: rgba(242, 242, 242, 1);
				img {
					margin: 0;
				}
			}
		}
		.txtr {
			textarea {
				width: 666rpx;
				height: 230rpx;
				border-radius: 16rpx;
				background: rgba(242, 242, 242, 1);
				padding: 16rpx 32rpx;
			}
		}
	}
	.bt {
		width: 604rpx;
		height: 84rpx;
		border-radius: 196rpx;
		border: 2rpx solid rgb(255, 67, 73);
		background: rgb(255, 67, 73);
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 32rpx;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
		margin: 40rpx auto 0 auto;
	}
	.kl {
		padding: 30rpx;
		height: 80vh;
		overflow: scroll;
		box-sizing: border-box;

		.kl_title {
			text-align: center;
			padding: 0 0 30rpx 0;
			font-size: 36rpx;
			font-weight: 400;
		}
		.kl_header {
			display: flex;
			align-items: center;
		}
		.ck {
			height: 40vh;
			overflow: scroll;
			margin-top: 30rpx;
		}
	}
	.bt {
		width: 604rpx;
		height: 84rpx;
		border-radius: 196rpx;
		border: 2rpx solid rgb(255, 67, 73);
		background: rgb(255, 67, 73);
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 32rpx;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
		margin: 40rpx auto 0 auto;
	}
	.editor_img {
		width: 16%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.myEdit {
		height: 40vh;
	}
}
</style>
